<script>
    let storageColorScheme = localStorage.getItem("lightDarkMode")
    {{- if eq .Site.Params.colorScheme "light" }}
    if ((storageColorScheme == 'Auto' && window.matchMedia("(prefers-color-scheme: dark)").matches) || storageColorScheme == "Dark") {
        document.getElementsByTagName('html')[0].classList.add('dark')
    }
    {{- else if eq .Site.Params.colorScheme "dark" }}
    if ((storageColorScheme == 'Auto' && window.matchMedia("(prefers-color-scheme: light)").matches) || storageColorScheme == "Light") {
        document.getElementsByTagName('html')[0].classList.remove('dark')
    }
    {{- else }}
    if (((storageColorScheme == 'Auto' || storageColorScheme == null) && window.matchMedia("(prefers-color-scheme: dark)").matches) || storageColorScheme == "Dark") {
        document.getElementsByTagName('html')[0].classList.add('dark')
    }
    {{- end }}
</script>
<nav class="flex items-center justify-between flex-wrap px-4 py-4 md:py-0">
    <a href="{{ "/" | relLangURL }}" class="mr-6 text-primary-text text-xl font-bold">{{ .Site.Title }}</a>
    <button id="navbar-btn" class="md:hidden flex items-center px-3 py-2" aria-label="Open Navbar">
        <i class="fas fa-bars"></i>
    </button>

    <div id="target"
        class="hidden block md:flex md:flex-grow md:justify-between md:items-center w-full md:w-auto text-primary-text z-20">
        <div class="md:flex md:h-16 text-sm md:flex-grow pb-4 md:pb-0 border-b md:border-b-0">
            {{- $relPermalink := .RelPermalink }}
            {{- range .Site.Menus.main }}
            {{- $url := .URL | relLangURL }}
            <a href="{{ $url }}" class="block mt-4 md:inline-block md:mt-0 md:h-(16-4px) md:leading-(16-4px) box-border md:border-t-2 md:border-b-2 {{ if hasPrefix $relPermalink $url }} selected-menu-item {{ else }} border-transparent {{ end }} mr-4">{{ .Name }}</a>
            {{- end }}
        </div>

        <div class="flex">
            <div class="relative pt-4 md:pt-0">
                <div class="cursor-pointer hover:text-eureka" id="lightDarkMode">
                    {{- if eq .Site.Params.colorScheme "dark" }}
                    <i class="fas fa-moon"></i>
                    {{- else if eq .Site.Params.colorScheme "light" }}
                    <i class="fas fa-sun"></i>
                    {{- else }}
                    <i class="fas fa-adjust"></i>
                    {{- end }}
                </div>
                <div class="fixed hidden inset-0 opacity-0 h-full w-full cursor-default z-30" id="is-open">
                </div>
                <div class="absolute flex flex-col left-0 md:left-auto right-auto md:right-0 hidden bg-secondary-bg w-48 rounded py-2 border border-tertiary-bg cursor-pointer z-40"
                    id='lightDarkOptions'>
                    <span class="px-4 py-1 hover:text-eureka">Light</span>
                    <span class="px-4 py-1 hover:text-eureka">Dark</span>
                    <span class="px-4 py-1 hover:text-eureka">Auto</span>
                </div>
            </div>

            {{- if .IsTranslated }}
            <div class="relative pt-4 pl-4 md:pt-0">
                <div class="cursor-pointer hover:text-eureka" id="languageMode">
                    <i class="fas fa-globe"></i>
                    <span class="pl-1">{{ .Language.LanguageName }}</span>
                </div>
                <div class="fixed hidden inset-0 opacity-0 h-full w-full cursor-default z-30" id="is-open-lang">
                </div>
                <div class="absolute flex flex-col left-0 md:left-auto right-auto md:right-0 hidden bg-secondary-bg w-48 rounded py-2 border border-tertiary-bg cursor-pointer z-40"
                    id='languageOptions'>
                    <a class="px-4 py-1 hover:text-eureka" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
                    {{- range .Translations }}
                    <a class="px-4 py-1 hover:text-eureka" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
                    {{- end }}
                </div>
            </div>
            {{- end }}
        </div>
    </div>

    <div class="fixed hidden inset-0 opacity-0 h-full w-full cursor-default z-0" id="is-open-mobile">
    </div>

</nav>
<script>
    let element = document.getElementById('lightDarkMode')
    {{- if eq .Site.Params.colorScheme "light" }}
    if (storageColorScheme == 'Auto') {
        element.firstElementChild.classList.remove('fa-sun')
        element.firstElementChild.setAttribute("data-icon", 'adjust')
        element.firstElementChild.classList.add('fa-adjust')
        document.addEventListener('DOMContentLoaded', () => {
            switchMode('Auto')
        })
    } else if (storageColorScheme == "Dark") {
        element.firstElementChild.classList.remove('fa-sun')
        element.firstElementChild.setAttribute("data-icon", 'moon')
        element.firstElementChild.classList.add('fa-moon')
    }
    {{- else if eq .Site.Params.colorScheme "dark" }}
    if (storageColorScheme == 'Auto') {
        element.firstElementChild.classList.remove('fa-moon')
        element.firstElementChild.setAttribute("data-icon", 'adjust')
        element.firstElementChild.classList.add('fa-adjust')
        document.addEventListener('DOMContentLoaded', () => {
            switchMode('Auto')
        })
    } else if (storageColorScheme == "Light") {
        element.firstElementChild.classList.remove('fa-moon')
        element.firstElementChild.setAttribute("data-icon", 'sun')
        element.firstElementChild.classList.add('fa-sun')
    }
    {{- else }}
    if (storageColorScheme == null || storageColorScheme == 'Auto') {
        document.addEventListener('DOMContentLoaded', () => {
            switchMode('Auto')
        })
    } else if (storageColorScheme == "Light") {
        element.firstElementChild.classList.remove('fa-adjust')
        element.firstElementChild.setAttribute("data-icon", 'sun')
        element.firstElementChild.classList.add('fa-sun')
    } else if (storageColorScheme == "Dark") {
        element.firstElementChild.classList.remove('fa-adjust')
        element.firstElementChild.setAttribute("data-icon", 'moon')
        element.firstElementChild.classList.add('fa-moon')
    }
    {{- end }}
    
    document.addEventListener('DOMContentLoaded', () => {
        getcolorscheme();
        switchBurger();
        {{- if .IsTranslated }}
        switchLanguage()
        {{- end }}
    });
</script>